<template>
	<view class="essay_detail_content" :style="screenHeight">
		<view class="essay_detail_top">
			<view class="essay_detail_top_left" @click="go_back">
				<image src="../../static/back_icon.png" style="width: 22px;height: 22px;"></image>
			</view>
			<view class="essay_detail_top_right">
				<image src="../../static/share.png" style="width: 22px;height: 22px;"></image>
			</view>
		</view>
		<u-loading-page :loading="loading" bg-color="gray"></u-loading-page>
		<view class="essay_detail_center">
			<view class="center_title">
				{{essay.essayTitle}}
			</view>
			<view class="center_user">
				<view class="user">
					<view class="headimg">
						<image :src="headImg" style="width:35px;height: 35px;border-radius: 50%;"></image>
					</view>
					<view class="username">
						{{essay.essayAuthor}}
					</view>
				</view>
			</view>
			<view class="read_time">
				<view class="readcount">
					{{essay.essayClicks}}人阅读
				</view>
				<view class="create_time">
					{{essay.essayTime}}
				</view>
			</view>
			<u-parse style="margin-top: 25px;" :content="essay.essayContent"></u-parse>
			<!-- <view style="margin-top: 25px;width: 100%;word-break: break-all;" v-html="essay.essayContent">
			</view> -->
		</view>
		<u-popup :show="show" @close="close" round="25">
			<view class="comment_prop">
				<view class="comment_tip">
					<view style="font-size: 14px;">
						评论 {{allcomment.length}}
					</view>
					<view @click="close">
						x
					</view>
				</view>
				<view class="comment_box" v-for="item in allcomment" :key="item.commentId">
					<view class="comment_headimg">
						<image :src="api + '/static/headImg/' + item.commentAuthor + '.png'" style="width: 30px;height: 30px;border-radius: 50px;"></image>
					</view>
					<view class="comment_content">
						<view class="comment_top">
							<view class="author">
								{{item.commentAuthor}}
							</view>
							<view class="support_icon" @click="addCommentSupport(item.commentId)">
								<image v-if="is_mysupport(item.commentId)" src="../../static/fin_support.png" style="width: 20px;height: 20px;"></image>
								<image v-else src="../../static/support.png" style="width: 20px;height: 20px;"></image>
								<view v-if="item.commentClicks!=0" style="font-size: 13px;color: gray;padding-left: 2px;padding-top: 2px;">
									{{item.commentClicks}}
								</view>
							</view>
						</view>
						<view class="text">
							{{item.commentContent}}
						</view>
						<view style="display: flex;justify-content: space-between;">
							<view class="time">
								{{item.commentTime}}
							</view>
							<view @click="open_comment_tip(item.commentId)" v-if="item.commentAuthor==username">
								<image src="../../static/gengduo.png" style="width: 15px;height: 15px;"></image>
							</view>
						</view>
						
					</view>
				</view>
				<u-popup :show="comment_tip_show" @close="comment_tip_show = false" round="5">
					<view style="text-align: center;padding: 20px 0 10px 0;" @click="delete_comment">
						删除评论
					</view>
					<view style="text-align: center;padding: 10px 0 20px 0;" @click="comment_tip_show = false">
						取消
					</view>
				</u-popup>
				<view class="comment_bottom">
					<view class="headimg">
						<image src="../../static/headimg.jpg" style="width: 30px;height: 30px;border-radius: 50px;"></image>
					</view>
					<view style="margin-left: 10px;">
						<u--input
						    placeholder="写评论"
						    v-model="comment_value"
							border="bottom"
							@focus="select_input"
							@blur="noselect"
						></u--input>
					</view>
					<view v-if="selectinput" style="padding-top: 10px;padding-left: 20px;">
						<u-button type="primary" text="发送" size="mini" @click="addComment"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="essay_detail_bottom" v-show="!loading">
			<view @click="support">
				<image v-if="isSupport" src="../../static/fin_support.png" style="width: 23px;height: 23px;"></image>
				<image v-else src="../../static/support.png" style="width: 23px;height: 23px;"></image>
				<view class="" style="font-size: 13px;text-align: center;">
					{{support_count.length}}
				</view>
			</view>
			<view>
				<!-- <image src="../../static/essay_love.png" mode="" style="width: 23px;height: 23px;"></image>
				<view class="" style="font-size: 13px;">
					666
				</view> -->
			</view>
			<view @click="open_comment">
				<image src="../../static/comment.png" mode="" style="width: 23px;height: 23px;"></image>
				<view class="" style="font-size: 13px;text-align: center;">
					{{allcomment.length}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/config.js'
	export default {
		data() {
			return {
				essayId: 0,
				essay: {},
				headImg: '',
				loading: true,
				show: false,
				allcomment: [],
				isSupport: false,
				support_count: 0,
				comment_value: '',
				selectinput: false,
				screenHeight: '',
				mysupport: [],
				allsupport: [],
				comment_tip_show: false,
				username: '',
				now_commentId: 0,
				api: api
			}
		},
		props: {
			
		},
		methods: {
			delete_comment() {
				uni.request({
					url:api + "/delete_comment/",
					method:'POST',
					data:{
						commentId: this.now_commentId
					},
					success:res=>{
						uni.request({
							url:api + '/get_essay_comment/',
							method:'POST',
							data:{
								essayId: this.essayId
							},
							success:res=>{
								this.allcomment = res.data.data
								this.comment_tip_show = false
							}
						})
					}
				})
			},
			open_comment_tip(commentId) {
				this.comment_tip_show = true
				this.now_commentId = commentId
			},
			addComment() {
				let now_time = (new Date(Date.now())).toLocaleString()
				uni.request({
					url:api + '/set_essay_comment/',
					method:'POST',
					data:{
						essayId:this.essayId,
						commentContent: this.comment_value,
						commentTime: now_time,
						commentAuthor: uni.getStorageSync('username'),
						commentClicks: 0,
					},
					success:res=>{
						this.comment_value = ''
						uni.request({
							url:api + '/get_essay_comment/',
							method:'POST',
							data:{
								essayId: this.essayId
							},
							success:res=>{
								this.allcomment = res.data.data
							}
						})
					}
				})
			},
			addCommentSupport(commentId) {
				if(this.allsupport.indexOf(commentId)!=-1){
					uni.request({
						url:api + '/support_comment/',
						method:'POST',
						data:{
							essayId: this.essayId,
							commentId: commentId,
							supportAuthor: uni.getStorageSync('username'),
							flag: 3
						},
						success:res=>{
							uni.request({
								url:api + '/get_essay_comment/',
								method:'POST',
								data:{
									essayId: this.essayId
								},
								success:res=>{
									this.allcomment = res.data.data
								}
							})
							this.mysupport = []
							this.allsupport = []
							res.data.data.forEach(e => {
							  this.allsupport.push(e.commentId)
							  if(e.isSupport){
								this.mysupport.push(e.commentId)
							  }
							})
						}
					})
				  }else{
					uni.request({
						url:api + '/support_comment/',
						method:'POST',
						data:{
							essayId: this.essayId,
							commentId: commentId,
							supportAuthor: uni.getStorageSync('username'),
							flag: 1
						},
						success:res=>{
							uni.request({
								url:api + '/get_essay_comment/',
								method:'POST',
								data:{
									essayId: this.essayId
								},
								success:res=>{
									this.allcomment = res.data.data
								}
							})
							this.mysupport = []
							this.allsupport = []
							res.data.data.forEach(e => {
							  this.allsupport.push(e.commentId)
							  if(e.isSupport){
								this.mysupport.push(e.commentId)
							  }
							})
						}
					})
				  }
			},
			is_mysupport(commentId) {
			  if(this.mysupport.indexOf(commentId)!=-1){
				// 在里面
				return true
			  }else{
				return false
			  }
			},
			noselect() {
				if(this.comment_value==''){
					this.selectinput = false
				}
			},
			select_input() {
				this.selectinput = true
			},
			support() {
				uni.request({
					url:api + '/support_essay/',
					method:'POST',
					data:{
						essayId: this.essayId,
						supportAuthor: uni.getStorageSync('username'),
						isSupport: !this.isSupport
					},
					success:res=>{
						this.isSupport = !this.isSupport
						this.support_count = res.data.support_count
					}
				})
			},
			open_comment() {
				this.show = true
				uni.request({
					url:api + '/support_comment/',
					method:'POST',
					data:{
						essayId: this.essayId,
						commentId: 1,
						supportAuthor: uni.getStorageSync('username'),
						flag: 2
					},
					success:res=>{
						this.mysupport = []
						this.allsupport = []
						res.data.data.forEach(e => {
						  this.allsupport.push(e.commentId)
						  if(e.isSupport){
							this.mysupport.push(e.commentId)
						  }
						})
					}
				})
			},
			close() {
				this.show = false
			},
			go_back() {
				uni.navigateBack()
			}
		},
		onLoad(option) {
			this.essayId = option.essayId
			let windowheight = uni.getSystemInfoSync().windowHeight
			this.screenHeight = `min-height:${windowheight}px`
		},
		mounted() {
			this.username = uni.getStorageSync('username')
			uni.request({
				url:api + '/get_essay/',
				method:'POST',
				data:{
					essayId: this.essayId
				},
				success:res=>{
					if(res.data.state=="OK"){
						this.essay = res.data.data[0]
						this.headImg = api + '/static/headImg/' + this.essay.essayAuthor + '.png'
						this.loading = false
					}
				}
			})
			uni.request({
				url:api + '/get_essay_comment/',
				method:'POST',
				data:{
					essayId: this.essayId
				},
				success:res=>{
					this.allcomment = res.data.data
				}
			})
			uni.request({
				url:api + '/get_support_essay/',
				method:'POST',
				data:{
					essayId: this.essayId,
					supportAuthor: uni.getStorageSync('username'),
				},
				success:res=>{
					if(res.data.data[0]){
						this.isSupport = res.data.data[0].isSupport
					}
					this.support_count = res.data.support_count
				}
			})
		}
	}
</script>

<style>
	.essay_detail_content{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.essay_detail_top{
		height: 75px;
		position: sticky;
		top: 0;
		z-index: 999;
		background-color: #14aef9;
		/* background-color: white; */
		padding: 10px 15px 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end
	}
	.essay_detail_center{
		margin-top: 20px;
		padding: 0 20px 0 20px;
	}
	.center_title{
		font-size: 20px;
		font-weight: 700;
	}
	.center_user{
		margin-top: 20px;
		
	}
	.user{
		display: flex;
		justify-content: flex-start;
	}
	.username{
		padding: 8px 0 0 10px;
	}
	.read_time{
		padding-top: 10px;
		display: flex;
		justify-content: space-between;
	}
	.create_time{
		font-size: 13px;
		color: gray;
	}
	.readcount{
		font-size: 13px;
		color: gray;
	}
	.essay_detail_bottom{
		/* width: ; */
		padding: 5px 100px 5px 100px;
		position: sticky;
		bottom: 0;
		border-top: 1px solid #e4e7ed;
		z-index: 999;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: white;
		display: flex;
		justify-content: space-between;
	}
	.comment_prop{
		height: 400px;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.comment_tip{
		padding: 10px 20px 10px 20px;
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 999;
	}
	.comment_box{
		height: 400px;
		padding: 20px 20px 0 20px;
		display: flex;
		justify-content: space-between;
	}
	.comment_content{
		padding: 0 0 0 10px;
		width: 500px;
	}
	.comment_top{
		display: flex;
		justify-content: space-between;
	}
	.author{
		font-weight: 700;
		font-size: 15px;
	}
	.text{
		font-size: 15px;
	}
	.time{
		margin-top: 7px;
		font-size: 12px;
		color: gray;
	}
	.support_icon{
		display: flex;
		justify-content: flex-start;
	}
	.comment_bottom{
		padding: 5px 20px 5px 20px;
		display: flex;
		justify-content: flex-start;
		position: sticky;
		bottom: 0;
		background-color: white;
		z-index: 999;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-top: 1px solid #e4e7ed;
		margin-top: 10px;
	}
</style>
